<template>
    <addFileView ref="addFileView" />
    <countWageMonthDeductView ref="countWageMonthDeductView"/>
    <div class="app-table">
        <div class="app-body">
            <div class="app-search">
                <el-form :inline="true" class="demo-form-inline" v-model="form">
                    <el-form-item label="工资月份">
                        <el-config-provider :locale="locale">
                            <el-date-picker v-model="form.wageMonth" type="month" placeholder="请选择月份" value-format="YYYY-MM-DD"/>
                        </el-config-provider>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit"   @keyup.enter="searchEnter">搜索</el-button>
                        <el-button type="success" @click="getWageMonth">统计考勤</el-button>
                        <el-button type="warning" @click="getSummaryData">下载汇总数据</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table size="small" :data="list" border>
                <el-table-column prop="id" label="序号"/>
                <el-table-column prop="month" label="工资月份"/>
                <el-table-column prop="total" label="请假总人数"/>
                <el-table-column prop="duration" label="请假总天数"/>
                <el-table-column prop="wage" label="扣除总金额"/>
                <el-table-column label="操作" width="340px">
                    <template style="display: block" #default="scope">
                        <el-button size="small" type="primary" @click="getDeductData(scope.row.month)">下载数据
                        </el-button>
                        <el-button size="small" v-if="user==1" type="success" @click="uploadDeductWage(scope.row.month)">上传金额
                        </el-button>
                        <el-button size="small" type="success" @click="sendMessage(scope.row.month)">发送通知
                        </el-button>
                        <el-button size="small" type="danger"
                                   @click="deleteDeductData(scope.row.month)">删除
                        </el-button>
                    </template>
                </el-table-column>
                <template v-slot:empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>
            <div style="margin-top: 10px">
                <el-config-provider :locale="locale">
                    <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize" @current-change="changeCurrentPage">
                    </el-pagination>
                </el-config-provider>
            </div>
        </div>
        <bottomView></bottomView>
    </div>
</template>
<script>
    import {ElConfigProvider, ElMessageBox, ElMessage} from "element-plus";
    import zhCn from "element-plus/lib/locale/lang/zh-cn";
    import {httpService} from "@/utils/httpService";
    import {Picture as IconPicture,Upload } from "@element-plus/icons-vue";
    import bottomView from "@/components/bottom.vue";
    import addFileView from "@/components/addExcelFile.vue";
    import countWageMonthDeductView from "../../components/attendance/countWageMonthDeduct";

    export default {
        name: "TeacherSignInStatisticsListView",
        data() {
            return {
                type: 0,
                title: "",
                page: 1,
                pageSize: 10,
                total: 0,
                limit: 10,
                list: [],
                checkedMonth:"",
                user:0,
                form: {
                    wageMonth: "",
                },
            };
        },
        components: {
            addFileView,
            IconPicture,
            ElConfigProvider,
            ElMessageBox,
            bottomView,
            ElMessage,
            Upload,
            countWageMonthDeductView
        },
        setup() {
            return {
                locale: zhCn,
            };
        },
        mounted() {
            this.getSalaryDeductList();
        },
        methods: {
            searchEnter: function (e) {
                // 使用 which 和 keyCode 属性来解决兼容问题
                var keyCode = window.event ? e.keyCode : e.which;
                var val = e.target.value;
                if (keyCode == 13 && val) {
                    this.getSalaryDeductList();
                }
            },
            sendMessage(month){
                ElMessageBox.confirm(
                    'proxy will permanently delete the file. Continue?',
                    'Warning',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
  )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '发送任务提交成功',
                    });
                    httpService(
                        "/pythonApi/attendanceApi/sendMessage",
                        {
                            'month':month
                        },
                        "get"
                    ).then((data) => {
                    });
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Delete canceled',
                    })
                })
            },
            uploadDeductWage(month){
                this.$refs.addFileView.title = '导入'+month+'月份金额';
                this.$refs.addFileView.dialogFormVisible = true;
                this.$refs.addFileView.month = month;
                this.$refs.addFileView.uploadApiUrl = "/pythonApi/attendanceApi/importDeductWage?month="+month
            },
            getWageMonth() {
                this.$refs.countWageMonthDeductView.title = '选择计算月份';
                this.$refs.countWageMonthDeductView.dialogFormVisible = true;
            },
            calculation(month) {
                ElMessage({
                    message: '数据计算中，请稍后',
                    type: 'success',
                });
                httpService(
                    "/pythonApi/attendanceApi/countDeduct",
                    {
                        'wageMonth':month
                    },
                    "get"
                ).then((data) => {
                    if (data.code == 200){
                        ElMessage({
                            message: '计算完成',
                            type: 'success',
                        });
                        this.getSalaryDeductList()
                    }
                });
            },
            deleteDeductData(month) {
                ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        httpService("/pythonApi/attendanceApi/deleteDeductData", "month=" + month, "post").then(
                            (data) => {
                                if (data.code == 200) {
                                    ElMessage.success("删除成功");
                                    this.getSalaryDeductList();
                                } else {
                                    ElMessage.error("删除失败，请重试！");
                                }
                            }
                        );
                    })
                    .catch(() => {
                    });
            },
            reloadData(){
                this.page=1;
                this.getSalaryDeductList()
            },
            exportExcel(data, fileName) {
                let link=document.createElement('a'), fileUrl=window.URL.createObjectURL(new Blob([data]));
                link.style.display='none';
                link.href=fileUrl;
                link.setAttribute('download', fileName+'.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(fileUrl)
            },
            onSubmit() {
                this.getSalaryDeductList();
            },
            // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
            changePageSize(size) {
                this.pageSize = size;
                this.limit = size;
                this.getSalaryDeductList();
            },

            // 改变页码，page：回调参数，表示当前选中的“页码”
            changeCurrentPage(page) {
                this.page = page;
                this.getSalaryDeductList();
            },
            getSalaryDeductList() {
                if(this.form.wageMonth == null){
                    this.form.wageMonth = ""
                };
                httpService(
                    "/pythonApi/attendanceApi/getSalaryDeductList",
                    {
                        page:this.page,
                        limit: this.limit,
                        wageMonth: this.form.wageMonth,
                        type:1
                    },
                    "get"
                ).then((data) => {
                    this.list = data.data;
                    this.total = data.total;
                    this.pageCount = data.pages;
                    this.user = data.userType;
                });
            },
            getDeductData(month) {
                let config = { "responseType": "blob" };
                httpService("/pythonApi/attendanceApi/getDeductData",
                    {
                        month:month,
                    },'get', config).then(
                    (data) => {
                        let fileName = month.toString();
                        this.exportExcel(data, fileName)
                    }
                )
            },
        },
    };
</script>
<style scoped>
.app-table {
    background: #eff3f5;
    padding: 10px;
    width: calc(100vw - 193px);
}

.app-search {
}


.app-body {
    background: white;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 243px);
}
</style>